<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监控</title>
    <!-- 引入 ECharts 图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <style>
        /* 数据监控页面样式 */
        .monitor-container {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* 控制栏 */
        .control-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        /* 日期选择 */
        .date-picker {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        /* 报表切换 */
        .report-tabs {
            display: flex;
            gap: 10px;
        }

        .tab-btn {
            padding: 8px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: #f0f0f0;
        }

        .tab-btn.active {
            background-color: #007bff;
            color: white;
        }

        /* 报表容器 */
        .report-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        /* 图表卡片 */
        .chart-card {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .chart-card h3 {
            margin-top: 0;
            margin-bottom: 20px;
        }

        /* 排行榜样式 */
        .rank-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .rank-item img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 15px;
        }

        .rank-info {
            flex: 1;
        }

        .rank-title {
            font-weight: 500;
            margin-bottom: 5px;
        }

        .rank-count {
            color: #666;
            font-size: 14px;
        }

        /* 日志表格 */
        .log-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .log-table th,
        .log-table td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }

        .log-table th {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <div class="monitor-container">
        <!-- 控制栏 -->
        <div class="control-bar">
            <input type="date" class="date-picker" id="datePicker">
            <div class="report-tabs">
                <button class="tab-btn active" onclick="switchReport('daily')">每日</button>
                <button class="tab-btn" onclick="switchReport('weekly')">每周</button>
                <button class="tab-btn" onclick="switchReport('monthly')">每月</button>
            </div>
        </div>

        <!-- 报表内容 -->
        <div class="report-container">
            <!-- 标签排行榜 -->
            <div class="chart-card">
                <h3>标签排行榜</h3>
                <div id="tagRankChart" style="height: 400px;"></div>
            </div>

            <!-- 下载量排行榜 -->
            <div class="chart-card">
                <h3>下载量排行榜</h3>
                <div id="downloadRankList"></div>
            </div>

            <!-- 收藏量排行榜 -->
            <div class="chart-card">
                <h3>收藏量排行榜</h3>
                <div id="favoriteRankList"></div>
            </div>

            <!-- 喜爱量排行榜 -->
            <div class="chart-card">
                <h3>喜爱量排行榜</h3>
                <div id="likeRankList"></div>
            </div>

            <!-- 传播日志 -->
            <div class="chart-card" style="grid-column: span 2;">
                <h3>传播日志</h3>
                <table class="log-table" id="logTable">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>类型</th>
                            <th>节点ID</th>
                            <th>影响范围</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody id="logBody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        let tagRankChart = echarts.init(document.getElementById('tagRankChart'));

        // 模拟数据
        const mockData = {
            daily: {
                tagRank: [
                    { name: '标签A', value: 120 },
                    { name: '标签B', value: 95 },
                    { name: '标签C', value: 80 },
                    { name: '标签D', value: 75 },
                    { name: '标签E', value: 60 }
                ],
                downloadRank: [
                    { title: '日落美景', count: 45, image: '../2420.jpg_wh860.jpg' },
                    { title: '乡村日景', count: 38, image: '../2420.jpg_wh860.jpg' },
                    { title: '雪山风光', count: 35, image: '../2420.jpg_wh860.jpg' }
                ],
                favoriteRank: [
                    { title: '星空银河', count: 60, image: '../2420.jpg_wh860.jpg' },
                    { title: '极光美景', count: 55, image: '../2420.jpg_wh860.jpg' },
                    { title: '樱花盛开', count: 50, image: '../2420.jpg_wh860.jpg' }
                ],
                likeRank: [
                    { title: '可爱稻草人', count: 120, image: '../2420.jpg_wh860.jpg' },
                    { title: '垂耳狗狗', count: 115, image: '../2420.jpg_wh860.jpg' },
                    { title: '熊猫宝宝', count: 110, image: '../2420.jpg_wh860.jpg' }
                ],
                logs: [
                    { time: '09:30', type: '数据溢出', node: 'N001', scope: '局部', status: '已处理' },
                    { time: '14:15', type: '链路中断', node: 'N005', scope: '区域', status: '处理中' }
                ]
            },
            weekly: {
                // 周数据...
            },
            monthly: {
                // 月数据...
            }
        };

        // 渲染标签排行榜
        function renderTagRankChart(data) {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: data.map(item => item.name),
                    inverse: true
                },
                series: [{
                    type: 'bar',
                    data: data,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    }
                }]
            };
            tagRankChart.setOption(option);
        }

        // 渲染下载量排行榜
        function renderDownloadRank(data) {
            const list = document.getElementById('downloadRankList');
            list.innerHTML = data.map(item => `
                <div class="rank-item">
                    <a href="../detailspage.html">
                        <img src="${item.image}" alt="${item.title}">
                    </a>
                    <div class="rank-info">
                        <div class="rank-title">${item.title}</div>
                        <div class="rank-count">下载量：${item.count}次</div>
                    </div>
                    
                </div>
            `).join('');
        }

        // 渲染收藏量排行榜
        function renderFavoriteRank(data) {
            const list = document.getElementById('favoriteRankList');
            list.innerHTML = data.map(item => `
                <div class="rank-item">
                    <a href="../detailspage.html">
                        <img src="${item.image}" alt="${item.title}">
                    </a>
                    <div class="rank-info">
                        <div class="rank-title">${item.title}</div>
                        <div class="rank-count">收藏量：${item.count}次</div>
                    </div>
                </div>
            `).join('');
        }

        // 渲染喜爱量排行榜
        function renderLikeRank(data) {
            const list = document.getElementById('likeRankList');
            list.innerHTML = data.map(item => `
                <div class="rank-item">
                    <a href="../detailspage.html">
                        <img src="${item.image}" alt="${item.title}">
                    </a>
                    <div class="rank-info">
                        <div class="rank-title">${item.title}</div>
                        <div class="rank-count">喜爱量：${item.count}次</div>
                    </div>
                </div>
            `).join('');
        }

        // 渲染日志表格
        function renderLogTable(logs) {
            const tbody = document.getElementById('logBody');
            tbody.innerHTML = logs.map(log => `
                <tr>
                    <td>${log.time}</td>
                    <td>${log.type}</td>
                    <td>${log.node}</td>
                    <td>${log.scope}</td>
                    <td><span style="color: ${log.status === '已处理' ? '#28a745' : '#dc3545'}">${log.status}</span></td>
                </tr>
            `).join('');
        }

        // 切换报表类型
        function switchReport(type) {
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            
            const data = mockData[type];
            renderTagRankChart(data.tagRank);
            renderDownloadRank(data.downloadRank);
            renderFavoriteRank(data.favoriteRank);
            renderLikeRank(data.likeRank);
            renderLogTable(data.logs);
        }

        // 初始化默认显示
        const initialData = mockData.daily;
        renderTagRankChart(initialData.tagRank);
        renderDownloadRank(initialData.downloadRank);
        renderFavoriteRank(initialData.favoriteRank);
        renderLikeRank(initialData.likeRank);
        renderLogTable(initialData.logs);

        // 窗口大小变化时重置图表
        window.addEventListener('resize', () => {
            tagRankChart.resize();
        });
    </script>
</body>
</html>